<template>
  <div id="add-batch-picture-page">
    <h2 style="margin-bottom: 16px">批量新增图片</h2>
    <a-form
      layout="vertical"
      :model="formData"
      name="basic"
      autocomplete="off"
      @finish="handleSubmit"
    >
      <a-form-item label="关键字" name="searchText">
        <a-input v-model:value="formData.searchText" allow-clear placeholder="请输入关键字" />
      </a-form-item>
      <a-form-item label="抓取数量" name="searchText">
        <a-input-number
          v-model:value="formData.count"
          :min="1"
          :max="30"
          allow-clear
          placeholder="请输入数量"
          style="min-width: 180px"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" style="width: 100%" :loading="loading" html-type="submit">执行任务</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { uploadPictureByBatchUsingPost } from '@/request/api/pictureController.ts'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'


const router = useRouter()
const formData = reactive<API.PictureUploadByBatchRequest>({
  count: 1,
})
const loading = ref(false)
const handleSubmit = async () => {
  loading.value=true;
  const { data:res } = await uploadPictureByBatchUsingPost({ ...formData })
  if (res.code === 0 && res.data) {
    message.success(`创建成功，共${res.data}条`)
    router.push({path:"/"})
  } else {
    message.error("创建失败"+res?.message)
  }
  loading.value=false
}
</script>
<style lang="less" scoped>
#add-batch-picture-page {
  max-width: 720px;
  margin: 0 auto;
}
</style>
